<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document文档对象</title>
</head>
<body>
<div id="div01" class="div001">第一个</div>
<div id="div02" class="div001">第二个</div>
<div id="div03" class="di003">第三个</div>
<input type="text" value="篮球" name="hobby">篮球
<input type="checkbox" value="音乐" name="hobby">音乐
<input type="checkbox" value="跳舞" name="hobby">跳舞
<button onclick="operation()">操作div标签</button>
<button onclick="operation2()">操作input标签</button>
<script>
    function operation() {
        // let elementById = document.getElementById("div01")
        // elementById.style.backgroundColor="red";
        // elementById.style.border="3px soilder green";
        // elementById.style.height="40px";
        // elementById.style.width="100px";

        // //getElementsByClassName("class值")------>结果为数组
        // var divs = document.getElementsByClassName("div001");
        // divs[1].style.color = "purple";
        // divs[1].style.fontSize = "20px";
        // divs[1].style.fontStyle = "italic";

//getElementsByTagName("标签名称")   查询class中的部分值
        var divs = document.getElementsByTagName("div");
        divs[1].style.color = "purple";
        divs[1].style.fontSize = "20px";
        divs[1].style.fontStyle = "italic";
    }
function operation2(){
        var vars = document.getElementsByName("hobby");
    for (let i = 0; i < vars.length; i++) {
        console.log(vars[i])
    }

}
</script>
</body>
</html>